
import './App.css';  // 引入一个样式
import Hd from './components/hd'
import Ft from './components/ft'
import Nbdexcx from './assets/gh_8127107146e7_258.jpg'; // 导入一个图片 名字可以自定义

// 引入路由需要使用的页面组件
import Layout from './components/Layout'
import Home from './pages/Home';
import Uc from './pages/Uc';
import List from './pages/List';
import Detail from './pages/Detail';
import Sublist from './pages/Sublist';
import Login from './pages/Login';
import Company from './pages/Company';

import {   
  RouterProvider, 
  HashRouter as Browser,
  Route,
  BrowserRouter,
  Routes,
  useRoutes,
  Router
}  from 'react-router-dom';


import  router from './router'

import BuildRoute from './router/BuildRouter';




function App() {

  return (
    <div className="abc">
      {/* 路由的第一个配置方式 很新很方便 */}
      {/* <RouterProvider router={router}/> */}

      {/* 路由的第二个配置方式 更符合现在已有项目的配置方式 */}

      <Browser>
       <Routes>
            <Route path='/'  element={ <Layout /> }>
                <Route path="" element={ <Home /> } />
                <Route path='/list' element={ <List /> }>
                    <Route path="sub" element={ <Sublist/> } />
                </Route>
                <Route path='uc' element={ <Uc /> } />
                <Route path='detail/:id' element={ <Detail /> } />
                {/* 公司管理 */}
                <Route path="company" element={ <Company /> } />
            </Route>
            <Route path='/login' element={ <Login /> }  />
        </Routes>  
      </Browser>

        {/*
           <Browser>
              <BuildRoute />
           </Browser>
      */}

      
       {/* <Hd />
       <div>我是app组件</div>
       <img src="/logo192.png" />
       <img src={Nbdexcx}  />
       <img src={ require('./assets/gh_8127107146e7_258.jpg') } />
       <Ft /> */}

      {/* <Uc />
      <List /> */}
      
    </div>
  );
}

export default App;
